<template>
    <div v-if="state.isShow">
        <el-dialog
            v-model="state.isShow"
            title="导出配置"
            width="45%"
            :before-close="handleClose"
            center
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <code-mirror ref="codeMirrorRef"/>
            <template #footer>
            <div class="footer">
                <el-button type="primary" @click="save">保存为文件</el-button>
                <el-button @click="close">关闭</el-button>
            </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { nextTick, reactive, ref } from 'vue';
import codeMirror from '@/components/code-mirror/index.vue'
import { downFile } from '@/utils';

const state = reactive({
    isShow:false
})
const codeMirrorRef = ref(null)

const close = ()=>{
    state.isShow = false
}

const handleClose = ()=>{
    close()
}
const openDialog = (val)=>{
    state.isShow = true
    nextTick(()=>{
        codeMirrorRef.value.setValue(val)
    })
}

const save = ()=>{
    const json = codeMirrorRef.value.getValue() ?? ''
    downFile(json, 'Xiao-Vform-data', 'json')
}

defineExpose({
    openDialog
})
</script>

<style lang='scss' scoped></style>